import { ref } from 'vue'
import { createGlobalState } from '@vueuse/core'

export default createGlobalState(
  () => {
    const menus = ref<MenuItems[]>([])
    const pages = ref<MenuPageObject>({});
    function findPages(value: MenuItems[]) {
        value.forEach((item: MenuItems) => {
            item.children && findPages(item.children);
            if (item.type === 'page' && typeof item.path === 'string') {
                pages.value[item.path.toLocaleLowerCase()] = {
                    path: item.path,
                    name: item.name,
                    type: item.type,
                };
                
            }
        })
    }
    function updateMenu(value: MenuItems[]) {
      findPages(value);
      menus.value = value;
    }
    return { menus, updateMenu, pages }
  }
)